<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('language.xzyy')" :leftIcon="true"></navbar>
		
		<!-- 搜索栏 -->
		<view class="search-box">
			<view class="search-input">
				<image src="/static/icon/search-icon.svg" class="search-icon"></image>
				<input type="text" v-model="searchText" placeholder="Search" class="input" placeholder-style="font-size: 27.91rpx;font-weight: 400; color:#9EA3AE;" />
			</view>
		</view>
		
		<!-- 语言列表 -->
		<view class="language-list">
			<view class="language-item" v-for="(item, index) in filteredLanguages" :key="index" @click="selectLanguage(item.code)">
				<view class="flag-box">
					<image :src="`/static/image/language/${item.code}.svg`" class="flag-icon"></image>
				</view>
				<view class="language-name">{{t('language.'+item.code)}}</view>
				<view class="check-box" v-if="currentLanguage === item.code">
					<image src="/static/image/language/checked.svg" class="check-icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { userApi } from '@/utils/api';
const { t, locale } = useI18n();

// 语言列表数据
const languages = [
	{ code: 'CN',name:t('language.CN'), apiCode: 'zh-CN' },
	{ code: 'HK',name:t('language.HK'), apiCode: 'zh-HK' },
	{ code: 'EN',name:t('language.EN'), apiCode: 'en-US' },
	{ code: 'VN',name:t('language.VN'), apiCode: 'vi-VN' },
	{ code: 'TH',name:t('language.TH'), apiCode: 'th-TH' },
	{ code: 'IN',name:t('language.IN'), apiCode: 'hi-IN' },
	{ code: 'ID',name:t('language.ID'), apiCode: 'id-ID' },
	{ code: 'KR',name:t('language.KR'), apiCode: 'ko-KR' },
	{ code: 'JP',name:t('language.JP'), apiCode: 'ja-JP' },
];

// 搜索文本
const searchText = ref('');

// 当前选中的语言
const currentLanguage = ref('');

// 根据搜索文本过滤语言列表
const filteredLanguages = computed(() => {
	if (!searchText.value) return languages;
	return languages.filter(item => 
		item.name.toLowerCase().includes(searchText.value.toLowerCase())
	);
});

// 选择语言
const selectLanguage = async (code) => {
	try {
		currentLanguage.value = code;
		
		// 获取对应的API代码
		const selectedLang = languages.find(lang => lang.code === code);
		
		// 调用API更新用户语言设置
		await userApi.updateLanguage(selectedLang.apiCode);
		
		// 保存语言设置到本地存储
		uni.setStorageSync('tradevase-lang', code);
		localStorage.setItem('tradevase-lang', code);
		
		// 设置i18n的locale
		locale.value = code;
		
		// 显示成功提示
		uni.showToast({
			title: '语言设置成功',
			icon: 'success'
		});
		
		console.log('选择的语言:', selectedLang, '映射的API代码:', selectedLang.apiCode);
		
		// 延迟返回上一页
		setTimeout(() => {
			uni.navigateBack();
		}, 1500);
	} catch (error) {
		console.error('语言设置失败:', error);
		uni.showToast({
			title: '语言设置失败',
			icon: 'error'
		});
	}
};

// 页面加载时获取当前语言设置
onMounted(() => {
	// 优先从localStorage获取，兼容不同平台
	const savedLanguage = localStorage.getItem('tradevase-lang') || uni.getStorageSync('tradevase-lang') || 'CN';
	currentLanguage.value = savedLanguage;
	
	// 确保当前页面使用正确的语言
	locale.value = savedLanguage;
});
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		padding: 20rpx 41.81rpx;
		box-sizing: border-box;
	}
	
	.search-box {
		margin: 20rpx 0 59.23rpx;
		
		.search-input {
			background-color: #FFFFFF;
			border-radius: 27.91rpx;
			padding: 0 60.98rpx;
			height: 97.67rpx;
			display: flex;
			align-items: center;
			
			.search-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			
			.input {
				flex: 1;
				height: 60rpx;
				font-size: 28rpx;
			}
		}
	}
	
	.language-list {
		margin-top: 30rpx;
		
		.language-item {
			background-color: #FFFFFF;
			border-radius: 27.91rpx;
			padding: 0 60.98rpx;
			height: 97.67rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20.91rpx;
			
			.flag-box {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.flag-icon {
					width: 52.33rpx;
					height: 34.88rpx;
					border-radius: 5.23rpx;
				}
			}
			
			.language-name {
				flex: 1;
				font-size: 27.91rpx;
				font-weight: 500;
				color: #121826;
			}
			
			.check-box {
				width: 40rpx;
				height: 40rpx;
				
				.check-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>